import "./VideoContainer.css";
import avatar from "../../common/img/avatar.png";
import { totalVideos } from "../../utils/utils";
import { Link } from "react-router-dom";
import VideoPageCard from "../../components/VideoPageCard";

function VideoContainer({ BV }) {
  const handleOnFocus = () => {
    let textAreaContainer = document.querySelector(".textarea-container");
    textAreaContainer.setAttribute("class", "textarea-container focus");
  }

  const handleOnBlur = () => {
    let textAreaContainer = document.querySelector(".textarea-container");
    textAreaContainer.setAttribute("class", "textarea-container");
  }

  return (
    <div className="v-wrap">
      <div className="l-con">
        <div className="video-info">
          <h1 className="video-title">
            {totalVideos[BV].title}
          </h1>
          <div className="video-data">
            <span>{totalVideos[BV].plays}播放 · </span>
            <span className="dm">总弹幕数{totalVideos[BV].danmakus}</span>
            <span>{totalVideos[BV].date}</span>
          </div>
        </div>
        <div className="player-wrap">
          <div className="bilibili-player">
            <iframe
              src={`//player.bilibili.com/player.html?aid=725100826&bvid=${BV}&cid=559668875&page=1`}
              scrolling="no"
              border="0"
              frameBorder="no"
              framespacing="0"
              allowFullScreen={true}>
            </iframe>
          </div>
        </div>
        <div className="splite-line"></div>
        <div className="comment">
          <div className="comment-head">
            <span className="results">0</span>
            <span className="title">评论</span>
          </div>
          <div className="comment-content">
            <div className="comment-send">
              <div className="user-face">
                <div className="bili-avatar">
                  <img src={avatar} alt="" />
                </div>
              </div>
              <div className="textarea-container">
                <textarea cols="80" rows="5" className="ipt-txt" placeholder="发一条友善的评论" onFocus={handleOnFocus} onBlur={handleOnBlur}></textarea>
                <button type="submit" className="comment-submit" onMouseEnter={handleOnFocus} onMouseLeave={handleOnBlur}>发表评论</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="r-con">
        <div>
          <div className="up-info">
            <div className="u-face">
              <Link to="">
                <div className="bili-avatar">
                  <img src={totalVideos[BV].avatar} alt="" />
                </div>
              </Link>
            </div>
            <div className="up-info-right">
              <div className="name">
                <div className="username">{totalVideos[BV].author}</div>
                <div className="desc">{totalVideos[BV].desc}</div>
              </div>
              <div className="btn-pannel">
                <div className="follow-btn">
                  <span>
                    <span className="prefix"></span>
                    <span className="isfollow">关注&nbsp;</span>
                    <span className="followers">2233万</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="rec-list">
          <div className="rec-title">
            接下来播放
          </div>
          {Object.entries(totalVideos).map(([key, value], index, arr) => {
            if (index > 8) {
              return;
            }
            return (
              <VideoPageCard videoCards={totalVideos} BV={key} key={index} />
            );
          })}
        </div>
      </div>
    </div>
  );
}

export default VideoContainer;